<template>
	<div class="line"><div class="echart" ref="echart"></div></div>
</template>

<script>
export default {
  props:["config"],
	data() {
		return {
			chartInit: null
		};
	},
	created() {},
	mounted() {
		this.initEcharts();
		window.addEventListener('resize', this.screenAdapter);
	},
	destroyed() {
		window.removeEventListener('resize', this.screenAdapter);
	},
	methods: {
		initEcharts() {
			this.chartInit = this.$echarts.init(this.$refs.echart,'biluo');
			const initOption = {
				xAxis: {
					type: 'category',
					data: this.config.x_value
				},
				yAxis: {
					type: 'value'
				},
        grid: {
        	top: '15px',
        	left: '45px',
        	right: '15px',
        	bottom: '25px'
        },
				series: [
					{
						data: this.config.y_value,
						type: 'line',
						smooth: true
					}
				]
			};
			this.chartInit.setOption(initOption);
		},
		screenAdapter() {
			//和分辨率先关的配置
			const titleFontSize = (this.$refs.echart.offsetWidth / 100) * 3.6;
			const adapterOption = {
				title: {
					textStyle: {
						fontSize: titleFontSize
					}
				},
				tooltip: {
					axisPointer: {
						lineStyle: {
							width: titleFontSize
						}
					}
				},
				series: [
					{
						// barWidth: titleFontSize, //圆柱的宽度
					}
				]
			};
			this.chartInit.setOption(adapterOption);
			//手动调用改变图标大小
			this.chartInit.resize();
		}
	}
};
</script>

<style lang="less" scoped>
.line {
  height: 100%;
  .echart {
    height: 100%;
  }
}
</style>
